<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>

<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!-- widget grid -->
<section id="widget-grid" class="">
    <!-- row -->
    <div class="row">
        <!-- NEW WIDGET START -->
        <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

            <!-- Widget ID (each widget will need unique ID)-->
            <div class="jarviswidget well jarviswidget-color-darken" id="wid-id-0" data-widget-sortable="false" data-widget-deletebutton="false" data-widget-editbutton="false"
                 data-widget-colorbutton="false">
                <header>
                    <span class="widget-icon"> <i class="fa fa-barcode"></i> </span>

                    <h2>Item #44761 </h2>
                </header>
                <!-- widget div-->
                <div>
                    <!-- widget edit box -->
                    <div class="jarviswidget-editbox">
                        <!-- This area used as dropdown edit box -->
                    </div>
                    <!-- end widget edit box -->
                    <!-- widget content -->
                    <div class="widget-body no-padding">

                        <div class="widget-body-toolbar">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="input-group">
                                        <input class="form-control" type="text" placeholder="Type invoice number or date...">

                                        <div class="input-group-btn">
                                            <button class="btn btn-default" type="button">
                                                <i class="fa fa-search"></i> Search
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-8 text-align-right">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" class="btn btn-sm btn-primary"> <i class="fa fa-edit"></i> Edit </a>
                                    </div>
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" class="btn btn-sm btn-success"> <i class="fa fa-plus"></i> Create New </a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="padding-10">
                            <br>

                            <div class="pull-left">
                                <%--<img src="img/logo-blacknwhite.png" width="150" height="32" alt="invoice icon">--%>
                                <address>
                                    <br>
                                    <strong>Intelligent, Inc.</strong>
                                    <br>
                                    231 Ajax Rd,
                                    <br>
                                    ZhuHai GD - 519000, CHN
                                    <br>
                                    <abbr title="Phone">P:</abbr> (123) 456-7890
                                </address>
                            </div>
                            <div class="pull-right">
                                <h1 class="font-400">Demo</h1>
                            </div>
                            <div class="clearfix"></div>
                            <br>
                            <br>

                            <div class="row">
                                <div class="col-sm-9">
                                    <h4 class="semi-bold">Demo, Inc.</h4>
                                    <address>
                                        <br>
                                        <strong>Intelligent, Inc.</strong>
                                        <br>
                                        231 Ajax Rd,
                                        <br>
                                        ZhuHai GD - 519000, CHN
                                        <br>
                                        <abbr title="Phone">P:</abbr> (123) 456-7890
                                    </address>
                                </div>
                                <div class="col-sm-3">
                                    <div>
                                        <div>
                                            <strong>DEMO NO :</strong>
                                            <span class="pull-right"> #AA-454-4113-00 </span>
                                        </div>

                                    </div>
                                    <div>
                                        <div class="font-md">
                                            <strong>DEMO DATE :</strong>
                                            <span class="pull-right"> <i class="fa fa-calendar"></i> 15/02/13 </span>
                                        </div>

                                    </div>
                                    <br>

                                    <div class="well well-sm  bg-color-darken txt-color-white no-border">
                                        <div class="fa-lg">
                                            Total :
                                            <span class="pull-right"> 4972 </span>
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                </div>
                            </div>

                            <div id="chart1" class="col-md-12">
                            </div>

                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th class="text-center">NO</th>
                                    <th>Column1</th>
                                    <th>Column2</th>
                                    <th>Column3</th>
                                    <th>Column4</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="text-center"><strong>1</strong></td>
                                    <td><a href="javascript:void(0);">Print and Web Logo Design</a></td>
                                    <td>Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam xplicabo.</td>
                                    <td>1300.00</td>

                                    <td>1300.00</td>
                                </tr>
                                <tr>
                                    <td class="text-center"><strong>1</strong></td>
                                    <td><a href="javascript:void(0);">SEO Management</a></td>
                                    <td>Sit voluptatem accusantium doloremque laudantium inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                                    <td>1400.00</td>
                                    <td>1400.00</td>
                                </tr>
                                <tr>
                                    <td class="text-center"><strong>1</strong></td>
                                    <td><a href="javascript:void(0);">Backend Support and Upgrade</a></td>
                                    <td>Inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</td>
                                    <td>1700.00</td>
                                    <td>1700.00</td>
                                </tr>
                                <tr>
                                    <td colspan="4">Total</td>
                                    <td><strong>4400.00</strong></td>
                                </tr>
                                <tr>
                                    <td colspan="4">HST/GST</td>
                                    <td><strong>13%</strong></td>
                                </tr>
                                </tbody>
                            </table>


                            <div class="invoice-footer">

                                <div class="row">

                                    <div class="col-sm-7">
                                        <div class="payment-methods">
                                            <h5>Payment Methods</h5>
                                            <img src="img/invoice/paypal.png" width="64" height="64" alt="paypal">
                                            <img src="img/invoice/americanexpress.png" width="64" height="64" alt="american express">
                                            <img src="img/invoice/mastercard.png" width="64" height="64" alt="mastercard">
                                            <img src="img/invoice/visa.png" width="64" height="64" alt="visa">
                                        </div>
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="invoice-sum-total pull-right">
                                            <h3><strong>Total: <span class="text-success">$4,972 USD</span></strong></h3>
                                        </div>
                                    </div>

                                </div>

                                <div class="row">
                                    <div class="col-sm-12">
                                        <p class="note">**To avoid any excess penalty charges, please make payments within 30 days of the due date. There will be a 2% interest charge per month on all
                                            late invoices.</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>
                    <!-- end widget content -->

                </div>
                <!-- end widget div -->

            </div>
            <!-- end widget -->

        </article>
        <!-- WIDGET END -->

    </div>

    <!-- end row -->

</section>

<style>
    .d3-tip {
        line-height: 1;
        font-weight: bold;
        padding: 12px;
        background: rgba(0, 0, 0, 0.8);
        color: #fff;
        border-radius: 2px;
    }

    /* Creates a small triangle extender for the tooltip */
    .d3-tip:after {
        box-sizing: border-box;
        display: inline;
        font-size: 10px;
        width: 100%;
        line-height: 1;
        color: rgba(0, 0, 0, 0.8);
        content: "\25BC";
        position: absolute;
        text-align: center;
    }

    /* Style northward tooltips differently */
    .d3-tip.n:after {
        margin: -1px 0 0 0;
        top: 100%;
        left: 0;
    }

    .axis text {
        font: 10px sans-serif;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
</style>

<script src="js/plugin/pace/pace.min.js"></script>
<script src="${ctx}/js/d3/d3.js"></script>
<script src="${ctx}/js/d3/d3.tip.js"></script>
<script type="text/javascript">
    // DO NOT REMOVE : GLOBAL FUNCTIONS!
    // load related plugins
    //    loadScript("js/d3/d3-main.js", function(){
    var n = 1, // number of layers
        m = 60, // number of samples per layer
        stack = d3.layout.stack(),
        layers = stack(d3.range(n).map(function () {
            return bumpLayer(m, .1);
        })),

//      yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
        yStackMax = d3.max(layers, function (layer) {
            return d3.max(layer, function (d) {
                return d.y0 + d.y;
            });
        });
    var margin = {top: 40, right: 10, bottom: 20, left: 50},
            width = $('#chart1').width() - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

    var x = d3.scale.ordinal()
            .domain(d3.range(m))
            .rangeRoundBands([0, width], .08);

    var y = d3.scale.linear()
            .domain([0, yStackMax])
            .range([height, 0]);

    var color = d3.scale.linear()
            .domain([0, n - 1])
            .range(["#aad", "#556"]);

    var xAxis = d3.svg.axis()
        //尺度转换规则
            .scale(x)
        //刻度线的像素长度
            .tickSize(0)
        //刻度线文字间距离
            .tickPadding(6)
        //坐标轴刻度方向
            .orient("bottom");
    var formatPercent = d3.format(".00");

    var yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
        //刻度文字的格式
            .tickFormat(formatPercent);

    var tip = d3.tip()
            .attr('class', 'd3-tip')
            .offset([-10, 0])
            .html(function (d) {
                var str = "<strong>X:</strong> <span style='color:red'>" + d.x + "</span>"
                        + "<strong> Y:</strong> <span style='color:red'>" + (d.y0 * 1 + d.y * 1) + "</span>";
                return str;
            });

    var svg = d3.select("#chart1").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")

    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 1)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Frequency");

    var layer = svg.selectAll(".layer")
            .data(layers)
            .enter().append("g")
            .attr("class", "layer")
            .style("fill", function (d, i) {
                return color(i);
            });

    var rect = layer.selectAll("rect")
            .data(function (d) {
                return d;
            })
            .enter().append("rect")
            .attr("x", function (d) {
                return x(d.x);
            })
            .attr("y", function (d) {
                return y(d.y);
            })
            .attr("width", x.rangeBand())
            .attr("height", 0)
            .on('mouseover', tip.show)
            .on('mouseout', tip.hide);

    rect.transition()
            .delay(function (d, i) {
                return i * 10;
            })
            .attr("y", function (d) {
                return y(d.y0 + d.y);
            })
            .attr("height", function (d) {
                return y(d.y0) - y(d.y0 + d.y);
            });

    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

    svg.call(tip);

    function transitionStacked() {
        y.domain([0, yStackMax]);

        rect.transition()
                .duration(500)
                .delay(function (d, i) {
                    return i * 10;
                })
                .attr("y", function (d) {
                    return y(d.y0 + d.y);
                })
                .attr("height", function (d) {
                    return y(d.y0) - y(d.y0 + d.y);
                })
                .transition()
                .attr("x", function (d) {
                    return x(d.x);
                })
                .attr("width", x.rangeBand());
    }

    // Inspired by Lee Byron's test data generator.
    function bumpLayer(n, o) {
        function bump(a) {
            var x = 1 / (.1 + Math.random()),
                    y = 2 * Math.random() - .5,
                    z = 10 / (.1 + Math.random());
            for (var i = 0; i < n; i++) {
                var w = (i / n - y) * z;
                a[i] += x * Math.exp(-w * w);
            }
        }

        var a = [], i;
        for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
        for (i = 0; i < 5; ++i) bump(a);
        return a.map(function (d, i) {
            return {x: i, y: Math.max(0, d)};
        });
    }

    transitionStacked();
    //    });

</script>
